<template>
	<view class="u-m-t-20">
		<view class="carts u-flex u-p-30" v-for="item in carts" :key="item.id">
			<view class="img u-m-r-20">
				<u-image width="200rpx" height="200rpx" :src="item.goods.cover_url"></u-image>
			</view>
			<view class="text">
				<view class="title u-m-b-10">
					{{item.goods.title}}
				</view>
				<view class="info u-m-b-10">{{item.goods.description}}</view>
				<view class="u-flex u-row-between">
					<view class="price">￥ {{item.goods.price}}</view>
					<view class="num">
						x{{item.num}}
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		name: "carts",
		props: {
			carts: {
				type: Array,
				default: []
			}
		},
		data() {
			return {};
		},
	}
</script>

<style lang="scss" scoped>
	.carts {
		background-color: #f5f5f5;
		border-bottom: 1px solid #eee;

		.text {
			flex: auto
		}
	}
</style>
